<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      default: () => ({
        name: '系统负载',
        value: 75,
        unit: '%'
      })
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.updateChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.updateChart()
    },
    updateChart() {
      if (!this.chart) return
      
      const option = {
        series: [
          {
            name: this.chartData.name,
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 8, // 减少分割线数量，避免拥挤
            radius: '75%', // 稍微减小半径，为文字留出更多空间
            axisLine: {
              lineStyle: {
                width: 25, // 减小轴线宽度
                color: [
                  [0.3, '#67C23A'],
                  [0.7, '#E6A23C'],
                  [1, '#F56C6C']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -40, // 调整刻度线位置
              length: 12, // 减小刻度线长度
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -47, // 调整分割线位置
              length: 12, // 减小分割线长度
              lineStyle: {
                color: '#fff',
                width: 3
              }
            },
            axisLabel: {
              color: '#fff', // 明确设置标签颜色
              distance: 30, // 增加标签距离
              fontSize: 14, // 增加字体大小
              fontWeight: 'bold', // 加粗字体
              formatter: function(value) {
                // 只显示关键刻度值，避免拥挤
                if (value === 0 || value === 25 || value === 50 || value === 75 || value === 100) {
                  return value;
                }
                return '';
              }
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}' + this.chartData.unit,
              color: '#fff', // 明确设置数值颜色
              fontSize: 24, // 增加数值字体大小
              fontWeight: 'bold', // 加粗数值
              offsetCenter: [0, '65%'], // 调整数值位置
              backgroundColor: 'rgba(255, 255, 255, 0.1)', // 添加背景
              borderRadius: 8, // 圆角背景
              padding: [8, 12] // 添加内边距
            },
            title: {
              show: true,
              offsetCenter: [0, '85%'], // 标题位置
              color: '#fff',
              fontSize: 16, // 增加标题字体大小
              fontWeight: 'bold'
            },
            data: [
              {
                value: this.chartData.value,
                name: this.chartData.name
              }
            ]
          }
        ]
      }
      
      this.chart.setOption(option)
    }
  }
}
</script> 